<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Document</title>
    <script src='../js/vue.js'></script>
</head>

<body>
    <!-- 
            Vue中的事件修饰符
                1.prevent:阻止默认事件
                2.stop：阻止事件冒泡
                3.once：事件只触发一次
                https://cn.vuejs.org/guide/essentials/event-handling.html
         -->
    <div id='root'>
        <h1>{{city}}</h1>
        <br>
        <a href="https://www.baidu.com/index.htm" @click.prevent="showInfo1">点我提示信息
        </a>
        <br>
        <!-- 阻止事件冒泡 -->
        <div class="demo1" @click="showInfo1">
            <!-- 修饰符可以连续写 -->
            <button @click.stop.prevent="showInfo1">点我提示信息</button>
        </div>
        <br>
        <!-- 事件只触发一次 -->
        <button @click.once="showInfo1">点我提示信息</button>
        <br>
        <!-- 捕获与冒泡 -->
        <div class="box1" @click="showMsg(1)">
            click1
            <div class="box2" @click="showMsg(2)">click2</div>
        </div>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                city: "北京"
            }, methods: {
                showInfo1(e) {
                    alert('show info');
                },

                showMsg(msg) {
                    console.log('click', msg);
                },
            },
        });
    </script>
</body>

</html>